<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  <script src="vue.js"></script>
  <div id="demo" v-demo:hello.a.b="{a:1}"></div>
  <script>
    Vue.directive('demo', {
      bind: function () {
        console.log('demo bound!')
      },
      update: function (value) {
        this.el.innerHTML =
          'name - '       + this.name + '<br>' +
          'expression - ' + this.expression + '<br>' +
          'argument - '   + this.arg + '<br>' +
          'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
          'value - '      + value
      }
    })
    var demo = new Vue({
      el: '#demo',
      data: {
        msg: 'hello!'
      }
    })
  </script>
</body>
</html>
